<template>
    <el-main>
        <!--搜索栏-->
        <el-form :model="listParm" :inline="true" size="default">
            <el-form-item label="">
                <el-input v-model="listParm.title" placeholder="标题"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input v-model="listParm.goodsName" placeholder="菜品"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input v-model="listParm.status" placeholder="上架状态"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" :icon="Search" @click="searchBtn">搜索</el-button>
                <el-button type="warning" :icon="Close" @click="resetBtn">重置</el-button>
                <el-button type="primary" :icon="Plus" @click="addBtn">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :height="tableHeight" :data="tableList" border stripe>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="goodsName" label="商品"></el-table-column>
            <el-table-column prop="images" label="图片">
                <template #default="scope">
                    <el-image :src="scope.row.images.split(',')[0]" style="height: 60px;width: 60px;border-radius: 50%;"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="orderId" label="序号"></el-table-column>
            <el-table-column prop="status" label="是否上架">
                <template #default="scope">
                    <el-tag v-if="scope.row.status=='0'" type="danger" size="default">否</el-tag>
                    <el-tag v-else size="default"  effect="dark">是</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button :icon="Edit" type="primary" size="default" @click="editBtn(scope.row)">编辑</el-button>
                    <el-button :icon="Delete" type="danger" size="default" @click="deleteBtn(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="listParm.page"
            layout="total, prev, pager, next, jumper" :total="listParm.totalSize" background>
        </el-pagination>
    </el-main>
    <!--新增、编辑的弹框-->
    <AddAdvertisement ref="addRef" @onFresh="getList"></AddAdvertisement>
</template>

<script setup lang="ts">
import AddAdvertisement from './AddAdvertisement.vue';
import { Search, Close, Plus, Edit, Delete } from '@element-plus/icons-vue'
import useAdvTable from '@/module/advertisement/useAdvTable';
import useAdv from '@/module/advertisement/useAdv';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { userStore } from '@/store/user';
const router = useRouter();
const store = userStore();
onMounted(() => {
    store.autoLogin(); // 尝试自动登录
    if (store.$state.key != '' && store.$state.key) {
        router.push('/advertisement');
    } else {
        router.push('/login');
    }
});
//表格业务
const { listParm, getList, searchBtn, resetBtn,tableList,tableHeight,sizeChange,currentChange } = useAdvTable()
//增删改业务
const { addRef,addBtn,editBtn,deleteBtn} = useAdv(getList)
</script>

<style scoped></style>